// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.contest-art-entry {
  @_top: contest-art-entry;

  --thumbnail-border-colour: transparent;
  --thumbnail-height-multiplier: 1;
  --thumbnail-scale: 1;
  --thumbnail-size: 256px;
  --thumbnail-width-multiplier: 1;
  --trophy-colour: chocolate;
  --vote-link-banner-bg: hsl(var(--hsl-b2));
  --vote-link-banner-scale: 1;
  margin: 10px;
  transform: translateZ(0);
  width: calc(
    var(--thumbnail-size) * var(--thumbnail-scale) *
      var(--thumbnail-width-multiplier)
  );

  &--placed-1 {
    --thumbnail-scale: 1;
    --trophy-colour: gold;
    --vote-link-banner-scale: 1;
  }

  &--placed-2 {
    --thumbnail-scale: 0.75;
    --trophy-colour: silver;
    --vote-link-banner-scale: 1;
  }

  &--placed-3 {
    --thumbnail-scale: 0.5;
    --vote-link-banner-scale: 0.5;
  }

  &--portrait {
    --thumbnail-width-multiplier: calc(3 / 4);
  }

  &--landscape {
    --thumbnail-height-multiplier: calc(9 / 16);
  }

  &--selected {
    --thumbnail-border-colour: @contest-selected-colour;
    --vote-link-banner-bg: var(--thumbnail-border-colour);
  }

  &--smaller {
    --thumbnail-scale: 0.5;
    --vote-link-banner-scale: 0.5;
  }

  &__entrant {
    text-align: right;
    font-size: 12px;
    .link-white();
    text-decoration: none;

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

    .@{_top}--placed & {
      font-size: 14px;
      overflow: visible;
    }
  }

  &__result {
    margin-top: 10px;
    text-align: center;
  }

  &__result-name {
    display: block;
  }

  &__result-place {
    padding-right: 5px;

    .@{_top}--placed & {
      font-size: 20px;
      white-space: nowrap;
    }
  }

  &__result-ranking {
    display: flex;
    justify-content: center;
    align-items: baseline;
  }

  &__result-votes {
    font-size: 10px;
    color: @osu-colour-f1;
  }

  &__thumbnail {
    width: 100%;
    height: calc(
      var(--thumbnail-size) * var(--thumbnail-scale) *
        var(--thumbnail-height-multiplier)
    );
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    background-size: cover;
    background-position: top;
    position: relative;
    margin: auto;
  }

  &__thumbnail-link {
    width: 100%;
    height: 100%;
    display: block;
    border: 4px solid var(--thumbnail-border-colour);
  }

  &__trophy {
    color: var(--trophy-colour);
  }

  &__vote-link-banner {
    --base-size: calc(
      0.25 * var(--thumbnail-size) * var(--vote-link-banner-scale)
    );
    position: absolute;
    right: 0;
    bottom: 0;
    width: var(--base-size);
    height: var(--base-size);
    font-size: calc(20px * var(--vote-link-banner-scale));
    display: flex;
    align-items: center;
    justify-content: center;

    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      border-style: solid;
      border-width: 0 0 var(--base-size) var(--base-size);
      border-color: transparent transparent var(--vote-link-banner-bg)
        transparent;
    }
  }
}
